<template>
  <div class="rebate__setting--form">
    <div class="rebate__tip">
      <div class="rebate__tip--lump"></div>
      <span class="rebate__tip--title">返利设置</span>
    </div>
    <div>
      <el-form :model="form" :rules="rules" ref="formRule" label-width="140px">
        <el-form-item label="商品返利" prop="rePrice">
          <div style="display: flex">
            <el-input
              :min="0"
              :controls="false"
              v-model="form.rePrice"
              placeholder="输入0-100之间的数字"
              style="width: 220px"
            >
              <el-button slot="append">%</el-button>
            </el-input>
            <div class="textTip" style="margin-left: 44px">
              所有商品统一使用，如需单独配置前往商品页面设置
            </div>
          </div>
        </el-form-item>
        <el-form-item label="余额使用条件" prop="useWayModels">
          <div style="display: flex">
            <el-checkbox-group v-model="form.useWayModels">
              <el-checkbox label="0" name="useWayModels">普通用户</el-checkbox>
              <el-checkbox label="1" name="useWayModels">会员</el-checkbox>
            </el-checkbox-group>
            <div class="textTip">可在小程序中使用返利余额</div>
          </div>
        </el-form-item>
        <el-form-item label="返利条件" prop="reWayModels">
          <div style="display: flex">
            <el-checkbox-group v-model="form.reWayModels">
              <el-checkbox label="0" name="reWayModels">普通用户</el-checkbox>
              <el-checkbox label="1" name="reWayModels">会员</el-checkbox>
            </el-checkbox-group>
            <div class="textTip">
              成功购买商品获得返利金额，勾选会员后 会员权益自动增加返利金额
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-left: 140px">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import { getRebateInSet, putRebateInSet } from "@/api/good/goods";

@Component
export default class Rebate extends Vue {
  @Ref()
  readonly formRule: HTMLFormElement;

  form = {
    rePrice: "",
    useWayModels: [],
    reWayModels: [],
    id: "",
  };

  rules = {
    rePrice: [
      {
        required: true,
        message: "请输入商品返利数值",
        trigger: "blur",
      },
    ],
    useWayModels: [
      {
        type: "array",
        required: true,
        message: "至少选择一种使用条件",
        trigger: "change",
      },
    ],
    reWayModels: [
      {
        type: "array",
        required: true,
        message: "至少选择一种返利条件",
        trigger: "change",
      },
    ],
  };

  mounted() {
    this.init();
  }

  init() {
    getRebateInSet({}).then((res) => {
      this.form.id = res.data ? res.data.id : "";
      this.form.rePrice = res.data ? res.data.rebateRatio : "";
      this.form.useWayModels = res.data
        ? res.data.balanceUseCondition.split(",")
        : ["1"];
      this.form.reWayModels = res.data
        ? res.data.rebateCondition.split(",")
        : ["1"];
    });
  }

  /**
   * 保存操作
   */
  async save() {
    try {
      await this.formRule.validate();

      const reg = /^[0-9][0-9]*$/;
      if (
        !reg.test(this.form.rePrice) ||
        Number(this.form.rePrice) < 0 ||
        Number(this.form.rePrice) > 100
      ) {
        this.$message.error("请输入0-100的返利比例");
        return;
      }
      const param = {
        balanceUseCondition: this.form.useWayModels.join(","),
        rebateCondition: this.form.reWayModels.join(","),
        id: this.form.id,
        rebateRatio: this.form.rePrice,
      };
      putRebateInSet(param)
        .then(() => {
          this.$message.success("保存成功");
          this.init();
        })
        .catch((err) => {
          this.$message.error(err || "网络错误");
        });
    } catch (e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
.rebate__setting--form {
  font-size: 14px;

  .rebate__tip {
    vertical-align: center;
    background-color: rgba(246, 248, 250, 1);
    padding: 15px 15px 15px 30px;
    margin-bottom: 30px;
    display: flex;

    .rebate__tip--lump {
      display: inline-block;
      width: 3px;
      height: 12px;
      background-color: #ff9900;
    }

    .rebate__tip--title {
      margin-left: 12px;
      color: #586884;
      font-weight: 700;
    }
  }
}

.textTip {
  font-size: 12px;
  color: #aeaeae;
  margin-left: 100px;
}
</style>
